<template>
  <progress :value="value" :max="max"></progress>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    value: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 100,
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
progress {
  width: 100%;
  height: 1.5rem;
  color: #39aea9;
  background: white;
  border: none;
}
/* 表示总长度背景色 */
progress::-webkit-progress-bar {
  background-color: #ffffff;
  border-radius: 0.5rem;
}
/* 表示已完成进度背景色 */
progress::-webkit-progress-value {
  background-color: #39aea9;
  border-radius: 0.5rem;
}

/* 表示已完成进度背景色 */
progress::-moz-progress-bar {
  background-color: #39aea9;
  border-radius: 0.5rem;
}
progress{
    width: 168px\9;
    height: 5px\9;
    color:#39aea9\9;      /* 表示已完成进度背景色 */
    background:#ffffff\9;     /* 表示总长度背景色 */
    border-radius:1rem\9;
}

</style>
